<template>
	<div class="contents">
		<Header></Header>
		<div class="content">
			<!-- shoptitle -->
			<section class="shopbg shop-pd">
				<van-row>
					<van-col span="8" class="titlewrap">
						<router-link to="/Novice" tag="div" class="shop-title">新手攻略</router-link>
					</van-col>
					<van-col span="8" class="titlewrap">
						<router-link to="/Mustsee" tag="div" class="shop-title">装修必看</router-link>
					</van-col>
					<van-col span="8" class="titlewrap">
						<router-link to="/constructor" tag="div" class="shop-title">找设计师</router-link>
					</van-col>
				</van-row>
			</section>
			
			<!-- 装修前 -->
			<section class="shop-pd">
				<h4 class="build-title">装修前</h4>
				<van-row gutter="5" type="flex" class="build-mtb">
				  <van-col span="8">
					<router-link tag="p" to="/builddetail" class="main-build">厨房用品</router-link>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">瓷砖</p>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">开关插座</p>
				  </van-col>
				</van-row>
				<van-row gutter="5" type="flex" class="build-mtb">
				  <van-col span="8">
					<p class="main-build">卫浴用品</p>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">墙纸</p>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">地板</p>
				  </van-col>
				</van-row>
				<van-row gutter="5" type="flex" class="build-mtb">
				  <van-col span="8">
					<p class="main-build">五金</p>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">涂料</p>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">石材</p>
				  </van-col>
				</van-row>
			</section>
			
			<!-- 装修中 -->
			<section class="shop-pd">
				<h4 class="build-title">装修中</h4>
				<van-row gutter="5" type="flex" class="build-mtb">
				  <van-col span="8">
					<p class="main-build">厨房用品</p>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">瓷砖</p>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">开关插座</p>
				  </van-col>
				</van-row>
				<van-row gutter="5" type="flex" class="build-mtb">
				  <van-col span="8">
					<p class="main-build">卫浴用品</p>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">墙纸</p>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">地板</p>
				  </van-col>
				</van-row>
				<van-row gutter="5" type="flex" class="build-mtb">
				  <van-col span="8">
					<p class="main-build">五金</p>
				  </van-col>
				</van-row>
			</section>
			
			<!-- 装修后 -->
			<section class="shop-pd">
				<h4 class="build-title">装修后</h4>
				<van-row gutter="5" type="flex" class="build-mtb">
				  <van-col span="8">
					<p class="main-build">厨房用品</p>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">瓷砖</p>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">开关插座</p>
				  </van-col>
				</van-row>
				<van-row gutter="5" type="flex" class="build-mtb">
				  <van-col span="8">
					<p class="main-build">卫浴用品</p>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">墙纸</p>
				  </van-col>
				  <van-col span="8">
					<p class="main-build">地板</p>
				  </van-col>
				</van-row>
				<van-row gutter="5" type="flex" class="build-mtb">
				  <van-col span="8">
					<p class="main-build">五金</p>
				  </van-col>
				</van-row>
			</section>
		</div>
	</div>
</template>

<script>
import Header from './Header'
import Vue from 'vue'
import { Row, Col } from 'vant'
Vue.use(Row).use(Col);
export default {
	data () {
		return {}
	},
	components: {
		Header
	}
}
</script>

<style lang="scss" scoped="scoped">
@import '@/lib/reset.scss';
.shopbg {
	height: .86rem;
	background: #fbfbfb;
}
.shop-pd {
	padding: 0 .1rem;
	box-sizing: border-box;
}
.titlewrap {
	@include flexbox();
	@include justify-content();
	@include align-items();
	height: .86rem;
}
.shop-title {
	@include flexbox();
	@include justify-content();
	@include align-items();
	@include rect(.84rem, .5rem);
	@include border-radius(.05rem);
	border: 1px solid #e0e0e0;
	box-sizing: border-box;
}
.build-title {
	height: .24rem;
	margin-top: .05rem;
	line-height: .24rem;
	font-size: .16rem;
}
.build-mtb {
	margin: .05rem 0;
}
.main-build {
	height: 1.1rem;
	background: #ccc;
	@include flexbox();
	@include justify-content();
	@include align-items();
}
</style>